<template>
<div id="views" class="my_account">
  <section id="sec1" class="asset">
    <div class="overhid">
      <div class="assetDiv">
        <p>账户总资产</p>
        <p>￥{{asset_deposit}}</p>
      </div>
    </div>
    <div class="assetDetail">
      <p class="overhidden">
        <span class="colorGrey floatleft">合约包金额</span>
        <span class="colorWhite floatright">￥{{machine_deposit}}</span>
      </p>
      <div class="coinsDetail flexStyle spaceBet">
        <div v-for="(item , index ) in power_list" :key="index">
          <p class="colorGrey">{{item.upName == 'BCNY' ? item.usdtName : item.upName }}</p>
          <p class="colorWhite">{{item.value}}</p>
          <p class="colorGrey" v-if="item.upName != 'CNY'">≈{{item.price || '0.00'}}</p>
        </div>
      </div>
    </div>
  </section>
  <section id="sec2" class="mathAsset">
    <p class="sec2title overhidden" style="padding: 0.3rem 0">
      <span class="floatleft">数字资产</span>
      <span class="floatright">￥{{math_deposit}}</span>
    </p>
    <ul class="list">
      <li v-for="(item,index) in math_list" :key="index">
        <p class="fp">
          <img :src="item.img" class="coinsIcon" alt="logo">
          <span class="coinsNum">
            {{item.name}}:{{item.coin}}
          </span>
          <span class="about">
            折合<span>￥{{item.total_price}}</span>
          </span>
<!--          <span class="about" v-if="item.name !='FIL'">-->
<!--            折合<span>￥{{item.total_price}}</span>-->
<!--          </span>-->
<!--          <span class="about filFreezen" v-if="item.name =='FIL'">冻结：{{item.freeze_coin}}</span>-->
        </p>
        <p class="lp">
          <span class="price">行情：{{item.price}}CNY</span>
          <span class="CNY"><span style="padding-left: 0.05rem;">冻结：{{item.freeze_coin}}</span> </span>
        </p>
      </li>
    </ul>
  </section>
  <section id="sec3" class="cnyMoney">
    <p class="p1">
      <span class="title">现金余额</span>
      <span class="deposit">￥{{cnyMoney}}</span>
    </p>
    <p class="p2">
      <span class="icon">
        <img src="../../common/imgs/rmb.png" alt="CNY">
        <span class="name">CNY</span>
      </span>
      <span class="deposit">￥{{cnyMoney}}</span>
    </p>
  </section>
  <section id="sec4" class="cnyMoney otcMoney">
    <p class="p1">
      <span class="title">余额(OTC)</span>
      <span class="deposit">￥{{otcMoney}}</span>
    </p>
    <p class="p2">
      <span class="icon">
        <img src="../../common/imgs/otc.png" alt="CNY">
        <span class="name">余额(OTC)</span>
      </span>
      <span class="deposit">￥{{otcMoney}}</span>
    </p>
  </section>
  <div class="outCoins">
    <a href="javascript:void 0;" class="yellowbtn" @click="toOutCoins">提币</a>
  </div>
  <dia-log ref="dl" msg="您还不是实名会员,需要立即去实名认证吗？" @confirm="confirmVerifcation"></dia-log>
  <dia-log ref="dl2" msg="您还未设置交易密码，设置后可进行提币，是否立即设置交易密码？" @confirm="$router.push({path : '/set_transaction_pws'})"></dia-log>
</div>
</template>
<script>
  import { myAssets , isRelNameVerify , isSetTransactionPws} from '../../http/api';
  export default {
    name: 'account',
    data() {
      return {
        introduce: '我的账户',
        asset_deposit:'',//账户总资产
        otcMoney:'',//otc余额等信息
        machine_deposit:'',//合约包总金额
        math_deposit :0,//数字资产总和
        cny:'',//cny合约包余额
        power_list:[],//合约包列表
        cnyMoney :'',//cny余额
        math_list: [],//数字资产列表
        imgs:{
          //数字资产 图片提前加载 , ajax拿到的数据，根据imgs的keys来排序
          btc : require('../../common/imgs/iconsc.png'),
          eth : require('../../common/imgs/iconse.png'),
          ltc : require('../../common/imgs/coins_ltc.png'),
          fil:require('../../common/imgs/fil.png'),
          bhp : require('../../common/imgs/iconsh.png'),//交易账户
          bhp_fh : require('../../common/imgs/iconsa.png'),//分红账户
          // echem : require('../../common/imgs/iconsg.png'),
          // pax : require('../../common/imgs/iconsf.png'),
          // bcny : require('../../common/imgs/iconsb.png'),
          usdt : require('../../common/imgs/iconsd.png'),
        },
        powerOrder : ['USDT' , 'BCNY' ,'CNY'], //合约包排序规则
        relNamePass : null,//实名状态
      }
    },
    components:{
      DiaLog: resolve => { require(['../../components/dialog'], resolve) },
      // tongdunCountdown : resolve => { require(['../../components/tongdunCountdown'],resolve) },//同盾倒计时功能插件
    },
    methods : {
      toOutCoins(){
        let not = {noLoading : true , noToast : true};
        let https = [
          isRelNameVerify(not).then(res =>{
            return res;
          }),
          isSetTransactionPws(not).then(res =>{
            return res;
          })
        ];
        this.loading();
        Promise.all(https).then(response => {
          this.closeLoading();
          let res = response[0];
          let code = Number(res.code);//判断是否需要实名
          let dialogMsg = null;
          let relName = false;
          switch(code){
            //实名认证: 0未通过(必须去实名)， 1 已通过， -1 审核中  2未实名审核
            case 609:
              this.relNamePass = 2 ;
              dialogMsg = '您还不是实名会员,需要立即去实名认证吗？';
              break;// 2未实名审核
            case 602:
              this.relNamePass = -1 ;
              dialogMsg = '您的实名认证正在审核中，请审核通过后再提币？';
              break; //-1 审核中
            case 614:
              this.relNamePass = 0 ;
              dialogMsg = '您还不是实名会员,需要立即去实名认证吗？';
              break;//实名认证: 0未通过(必须去实名)，
            case 200:
              relName = true;
              //this.$router.push({path : '/out_select_coins'});
              break;
          }
          //判断是否实名
          if(this.relNamePass === 2 || this.relNamePass === 0 || this.relNamePass === -1){
            this.$refs.dl.changeToast(dialogMsg);
            this.$refs.dl.dialogShow();
            return;
          }
          //判断是否设置交易密码
          let res2 = response[1];
          let hasPws = Number(res2.code) == 344 ? false : true;
          if(!hasPws){
            this.$refs.dl2.dialogShow();
            return;
          }
          //跳转币种选择列表
          this.$router.push({path : '/out_select_coins'});
        });
      },
      confirmVerifcation(){
        if(this.relNamePass === 2 || this.relNamePass === 0){
          this.$router.push({ path : '/chose_foreign'});
        }
      },
      packageMathList( arr , prices ){
        //组装数字资产，传入当前币种的arr 和 币种的价格数组prices
        let thiz = this;
        let math_deposit = 0 ;//数字资产总和
        for( let i = arr.length - 1 ; i >= 0 ; i-- ){
          let curname = arr[i]['coin_name'].toLowerCase();//switch判断的名称
          let curimg = thiz.imgs[curname] || null;//设置对应图片
          let splitLen = 8; //币种保留位数
          if( !curimg  ){
            arr = thiz.arrRemove(arr , i);//如果imgs中不存在支付方式，删除此项
          } else {
              arr[i]['img'] = curimg;
              let cur_price = prices[`${curname.toLowerCase()}_price`];
              switch (curname) {
                case 'fil':
                  curname = 'FIL';
                  // cur_price = prices['fil_price'];
                  // arr[i].total_price = 0;
                  splitLen = 8;
                  break;
              }
              curname = curname.toUpperCase();
              arr[i].coin = thiz.numSlice(arr[i].coin  , splitLen );//币种数量
              arr[i].name =  curname;//币种中文名称
              arr[i].price = cur_price;//估价
              // var total_price = thiz.numSlice( arr[i].total_price , splitLen );//估值
              arr[i].freeze_coin = thiz.numSlice( arr[i].freeze_coin , splitLen );//冻结
              arr[i].total_price =  thiz.numSlice( arr[i].total_price  , 2 );//折合
              math_deposit = thiz.accAdd( arr[i].total_price , math_deposit );//计算总值
          }
        }
        thiz.math_deposit = thiz.numSlice( math_deposit , 2 ); //数字资产总和
        let order = Object.keys(thiz.imgs); //排序规则
        arr.sort( function ( a , b ) {
          return order.indexOf(a.name) - order.indexOf(b.name);  //对数组排序，按照this.imgs顺序 输出
        });
        return arr;
      },
      packagePowerList( obj ){
        //组装合约包金额
        let keys = Object.keys(obj);
        let values = Object.values(obj);
        let thiz = this ;
        thiz.machine_deposit = 0;
        for( let i = values.length - 1 ; i >= 0 ; i-- ){
          let upName = keys[i];
          switch (upName) {
            case 'deposit_bcny':
              upName = 'BCNY';  values[i].usdtName = '余额OTC';  break;
            case 'deposit_usdt':
              upName = 'USDT'; break;
            case 'deposit':
              upName = 'CNY';
              break;
          }
          values[i]['upName'] = upName;//定义名字
          if( thiz.powerOrder.indexOf(upName) === -1 ){
            //判断powerorder中含有没有，没有就删除
            values.splice( i , 1)
          }
          values[i].value = thiz.numSlice( values[i].value , 4 );//币种默认保留4位
          thiz.machine_deposit = thiz.numSlice( thiz.accAdd(thiz.machine_deposit , values[i].price || 0 ) , 2 );//合约包总金额
        }
        values.sort( function ( a , b ) {
          return thiz.powerOrder.indexOf(a.upName) - thiz.powerOrder.indexOf(b.upName);
        });
        return values;
      },
    },
    mounted() {
      let thiz = this;
      myAssets().then(res => {
        if (res.code == 200) {
          let data = res.data.res;
          let assets_lists = data.assets_lists.BCNY ? data.assets_lists : null;
          thiz.math_list = thiz.packageMathList( data.my_finance , data.coinPrice);//数字资产列表
          thiz.power_list = thiz.packagePowerList(data.deposit);//合约包列表
          let yue_otc = data.yue_otc.total_price || 0;
          let freeze_otc = data.yue_otc.freeze_total_price || 0;
          thiz.otcMoney = thiz.accAdd( yue_otc , freeze_otc );//otc余额
          thiz.cnyMoney = data.cny.CNY ?  thiz.numSlice( data.cny.CNY.availableAssetConversion , 2) : 0;//cny余额
          thiz.asset_deposit = thiz.numSlice(thiz.accAddMore(thiz.machine_deposit , thiz.math_deposit ,thiz.cnyMoney ,thiz.otcMoney) , 2 ) || '0.00';//账户总资产
        }
      })
    }
  }
</script>
<style type="text/less" lang="less" scoped>

  #sec1{
    background: #fff;padding-bottom: 0.3rem;
    .overhid{overflow: hidden}
    .assetDiv{
      text-align: center;padding:0 0.3rem;
      p:first-child{
        font-size: 0.28rem;color: #898989;padding-top: 0.6rem;font-family: PingFang-SC-Regular;
      }
      p:last-child{
        color: #181818;font-size: 0.34rem;padding-top: 0.3rem;padding-bottom: 0.48rem;font-family: PingFang-SC-Regular;
      }
    }
    .colorGrey{
      font-size: 0.28rem;color: rgba(255, 255, 255, 0.4);
    }
    .colorWhite{
      color:#fff;font-size: 0.28rem;
    }
    >.assetDetail{
      width: calc( 100% - 0.6rem );margin: 0 auto;background: url('../../common/imgs/powerlistbg.png') center center no-repeat;
      background-size: 100% 100%;border-radius: 0.08rem;padding:0 0.3rem;
      -webkit-box-shadow: 0px 10px 0.2rem #e9ebf7;
      box-shadow: 0px 10px 0.2rem #e9ebf7;
      -moz-box-shadow: 0px 10px 0.2rem #e9ebf7;
      -web-kit-shadow: 0px 10px 0.2rem #e9ebf7;
      >p:first-child{
        border-bottom: 0.02rem solid rgba(255, 255, 255, 0.15);height: 0.8rem;
        >span{line-height: 0.8rem;}
      }
      >.coinsDetail{
        overflow: hidden;padding-top: 0.2rem;
        >div{
          text-align: left;font-size: 0.285rem;height:2rem;
        }
        p{
          padding-top: 0.25rem;
        }
      }
    }
  }
  #sec2{
    width: calc( 100% - 0.6rem );margin: 0 auto;background: #fff;margin-top: 0.3rem;padding: 0 0.3rem;padding-bottom: 0.5rem;border-radius: 0.08rem;
    .sec2title{
      font-size: 0.32rem;line-height: 1.05rem;border-bottom: 0.02rem solid rgb(239, 239, 239);
      >span:last-child{font-size: 0.28rem;}
    }
    li{
      padding-top: 0.4rem;text-align: left;
      >.fp{
        line-height: 0.42rem;overflow: hidden;
        .coinsIcon{height: 0.4rem;width: 0.4rem;vertical-align: middle;margin-right: 0.2rem;float: left}
        >span{line-height: 0.42rem;vertical-align: middle}
        >.coinsNum{line-height: 0.42rem;font-size: 0.28rem;float: left}
        >.about{
          font-size: 0.24rem;float: right;color: #595959;
          >span{color: #262626;padding-left: 0.05rem}
        }
        >.filFreezen{
          color: #B3B3B3;
        }
      }
      >.lp{
        text-align: left;padding-left: 0.62rem;overflow: hidden;
        >span{line-height: 0.6rem;}
        .price{
          color: #898989;font-size: 0.22rem;float: left;
        }
        .CNY{float: right;font-size: 0.22rem;color: #B3B3B3}
      }
    }
  }
  #sec3,#sec4{
    width: calc( 100% - 0.6rem );margin: 0 auto;background: #fff;margin-top: 0.2rem;padding: 0 0.3rem;border-radius: 0.08rem;
    .p1{
      overflow: hidden;border-bottom: 0.01rem solid#eee;
      >span{
        line-height: 0.88rem;
      }
      .title{
        font-size: 0.28rem;color: #262626;float: left;
      }
      .deposit{
        font-size: 0.24rem;float: right;
      }
    }
    .p2 {
      overflow: hidden;
      >span{
        line-height: 0.88rem;vertical-align: middle;
      }
      .icon{
        float: left;display: inline-block;
        img{width: 0.4rem;height: 0.4rem;vertical-align: middle;}
        .name{font-size: 0.28rem;color: #262626;line-height: 0.88rem;padding-left: 0.06rem;}
      }
      .deposit{
        font-size: 0.24rem;float: right;
      }
    }
  }
  #sec4{
    margin-bottom: 0.5rem;border-radius: 0.08rem;
  }
  .outCoins{
    position: fixed;bottom: 0;left:0;height:1.44rem;background:#fff;width: 100%;z-index: 1;border-top: 0.01rem solid#eee;padding:0 0.3rem;
    a{
      height: 0.88rem;line-height: 0.88rem;margin-top: 0.28rem;font-size: 0.3rem;
    }
  }
  @media screen and( min-width:1024px ) {
    .outCoins{
      width:600px;left:50%;margin-left: -300px;;
    }
  }
  #views{
    padding-bottom: 1.44rem;
  }
</style>
